<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <link rel="stylesheet" href="css/common.css"/>
	    <link rel="stylesheet" href="css/order_details.css"/>
	    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	    <script type="text/javascript" src="js/common.js"></script>
		<title>订单详情页</title>
	</head>
	<body>
		 <div class="head">
	       <div class="top">
            <div class="top-main">
                <div class="left">
                    <span>欢迎光临欧瑞诗</span>
                    <i></i>
                    <a href="login.html">登录</a>
                    <a href="rejest.html">注册</a>
                </div>
                <div class="right">
                	<div class="order-list">
                		<a class="link" href="">我的订单</a>
                		<i></i>
	                    <ul>
	                    	<li><a href="">已购买的物品</a></li>
	                    	<li><a href="">我的订单</a></li>
	                    	<li><a href="">已支付完成</a></li>
	                    </ul>
                	</div>
                	<div class="uesr-list">
                		<a class="link" href="">我的欧瑞诗<img src="img/down.png" alt=""/></a>
  						<i></i>
	                    <ul>
	                    	<li><a href="">个人资料查看</a></li>
	                    	<li><a href="">个人资料修改</a></li>
	                    	<li><a href="">管理收货地址</a></li>
	                    </ul>
                	</div>
                	<div class="vip-list">
                		<a class="link" href="">欧瑞诗会员<img src="img/down.png" alt=""/></a>
	                    <ul>
	                    	<li><a href="">成为会员</a></li>
	                    	<li><a href="">会员优惠</a></li>
	                    	<li><a href="">会员专区</a></li>
	                    </ul>
                	</div>    
                </div>
            </div>
        </div>
	        <div class="bottom">
	            <div class="logo">
	                <div class="logo-left">
	                    <a href="index.html">
	                        <img src="img/logo.png" alt=""/>
	                        <span>欧瑞诗</span>
	                    </a>
	                </div>
					<div class="logo-middle">
						<div class="search">
							<input type="text"/>
							<button></button>
							<ul></ul>
						</div>
						<a class="car" href="shop_cart.html">
							<img src="img/car.png" alt="">购物车 0
						</a>
					</div>
	            </div>
	        </div>
	        <div class="nav">
	            <div class="navbar">
	                <div class="classify">
	                    <div class="title">
	                        <a class="all" href="">全部商品分类&nbsp;&nbsp;<img src="img/drop.png" alt=""/></a>
	                    </div>
	                    <ul class="navpop">
	                        <li>
	                            <a  class="theme" href=""><img src="img/bracelet.png" alt=""/>水晶手链</a>
	                            <a href="">紫水晶手链</a>
	                            <a href="">黄水晶手链</a>
	                            <a href="">石榴石手链</a>
	                            <a href="">绿幽灵手链</a>
	                        </li>
	                        <li>
	                            <a  class="theme" href=""><img src="img/pendant.png" alt=""/>水晶吊坠</a>
	                            <a href="">白水晶吊坠</a>
	                            <a href="">黑曜石吊坠</a>
	                            <a href="">发晶吊坠</a>
	                            <a href="">钛晶吊坠</a>
	                        </li>
	                        <li>
	                            <a  class="theme" href=""><img src="img/necklace.gif" alt=""/>水晶项链</a>
	                            <a href="">项链</a>
	                            <a href="">毛衣链</a>
	                        </li>
	                        <li>
	                            <a  class="theme" href=""><img src="img/ear-ring.png" alt=""/>水晶项链</a>
	                            <a href="">水晶戒指</a>
	                            <a href="">水晶耳饰</a>
	                        </li>
	                        <li>
	                            <a  class="theme" href=""><img src="img/decoration.png" alt=""/>水晶摆件</a>
	                            <a href="">水晶簇</a>
	                            <a href="">水晶原石</a>
	                            <a href="">水晶聚宝盆</a>
	                        </li>
	                        <li>
	                            <a  class="theme" href=""><img src="img/ornaments.gif" alt=""/>其它饰品</a>
	                            <a href="">水晶把玩</a>
	                            <a href="">水晶车挂</a>
	                        </li>
	                    </ul>
	                </div>
	                <ul class="navtop">
	                    <li>
	                        <a class="active" href="">首页</a>
	                    </li>
	                    <li>
	                        <a href="">水晶手链</a>
	                    </li>
	                    <li>
	                        <a href="">水晶吊坠</a>
	                    </li>
	                    <li>
	                        <a href="">水晶项链</a>
	                    </li>
	                    <li>
	                        <a href="">戒指耳环</a>
	                    </li>
	                    <li>
	                        <a href="">水晶摆件</a>
	                    </li>
	                    <li>
	                        <a href="">其它饰品</a>
	                    </li>
	                </ul>
	            </div>
	        </div>
	    </div>
	    <div class="content">
	        <div class="main">
	            <div class="main-left">
	                <h3>个人中心</h3>
	                <ul>
	                    <li><a href="">个人资料查看</a></li>
	                    <li><a href="">个人资料修改</a></li>
	                    <li><a href="">修改登录密码</a></li>
	                    <li><a href="">管理收货地址</a></li>
	                    <li><a class="active" href="">我的订单</a></li>
	                    <li><a href="">待收货</a></li>
	                    <li><a href="">待评价</a></li>
	                    <li><a href="">待付款</a></li>
	                </ul>
	            </div>
	            <div class="main-right">
					<h3 class="order-tit">订单详情</h3>
					<div class="order-idt">
						<h3 class="theme">订单概况</h3>
						<p class="order-number">
							<span class="code">订单号：KM2017038425760</span>
							<span class="state">状态：未付款</span>
						</p>
						<div class="line"></div>
						<p class="price">订单金额：<span>¥392.00</span>（免运费）</p>
						<p class="pay-state">是否支付：未支付</p>
						<p class="receive">收货状态：未收货</p>
						<p class="style">送货方式：卖家留言</p>
						<p class="track">
							<i>订单跟踪详情：</i>
							<b class="time">
								<span>处理时间</span>
								<span>2017-03-03 11:11:12</span>
							</b>
							<b class="manage">
								<span>订单处理</span>
								<span>提交订单</span>
							</b>
							<b class="operator">
								<span>操作人</span>
								<span>ZYX1431</span>
							</b>
						</p>
					</div>
	            	<div class="pay-list">
						<h3 class="pay-theme">商品清单</h3>
						<div class="list-tit">
							<b class="msg">商品信息</b>
							<b class="unit-price">单价</b>
							<b class="num">数额</b>
							<b class="cost">金额</b>
						</div>
						<div class="pay-text">
							<div class="pay-idt">
								<a href="">
									<img src="img/pay-list.png" alt="" />
								</a>
								<h3>天然绿碧玺吊坠 18K白金镶边 永恒祝福 </h3>
								<p>
									<span>尺码：均码</span>&nbsp;&nbsp;
									<span>颜色：绿色</span>&nbsp;&nbsp;
								</p>
							</div>
							<b class="unit-price">¥589.00</b>
							<b class="num">1</b>
							<b class="cost">¥589.00</b>
						</div>
						<h3 class="price">商品价格：<span>¥589.00</span></h3>
						<h3 class="price">运费：<span>¥0.00</span></h3>
						<h3 class="price">优惠：<span>¥0.00</span></h3>
						<h3 class="price">总计：<span>¥589.00</span></h3>
					</div>
				</div>
	        </div>
	    </div>
		 <div class="foot">
			 <div class="foot-top">
				 <div class="foot-text">
					 <ul>
						 <li>
							 <a href="">
								 <img src="img/newprd.png" alt=""/>
								 <span>每日更新</span>
							 </a>
						 </li>
						 <li>
							 <a href="">
								 <img src="img/qualication.png" alt=""/>
								 <span>正品保障</span>
							 </a>
						 </li>
						 <li>
							 <a href="">
								 <img src="img/quick.png" alt=""/>
								 <span>闪电发货</span>
							 </a>
						 </li>
						 <li>
							 <a href="">
								 <img src="img/pay.png" alt=""/>
								 <span>货到付款</span>
							 </a>
						 </li>
						 <li>
							 <a href="">
								 <img src="img/retreat.png" alt=""/>
								 <span>七天退换</span>
							 </a>
						 </li>
					 </ul>
				 </div>
			 </div>
			 <div class="foot-bottom">
				 <div class="bottom-main">
					 <div class="foot-left">
						 <div class="list">
							 <ul>
								 <li>
									 <a class="title" href="">使用帮助</a>
								 </li>
								 <li>
									 <a href="">新用户注册</a>
								 </li>
								 <li>
									 <a href="">找回密码</a>
								 </li>
								 <li>
									 <a href="">会员权益</a>
								 </li>
								 <li>
									 <a href="">常见问题</a>
								 </li>
							 </ul>
							 <i></i>
						 </div>
						 <div class="list">
							 <ul>
								 <li>
									 <a class="title" href="">购物指南</a>
								 </li>
								 <li>
									 <a href="">正品货源采购</a>
								 </li>
								 <li>
									 <a href="">优惠券</a>
								 </li>
								 <li>
									 <a href="">积分计划</a>
								 </li>
							 </ul>
							 <i></i>
						 </div>
						 <div class="list">
							 <ul>
								 <li>
									 <a class="title" href="">支付方式</a>
								 </li>
								 <li>
									 <a href="">支付方式</a>
								 </li>
								 <li>
									 <a href="">货到付款</a>
								 </li>
								 <li>
									 <a href="">余额支付</a>
								 </li>
							 </ul>
							 <i></i>
						 </div>
						 <div class="list">
							 <ul>
								 <li>
									 <a class="title" href="">配送方式</a>
								 </li>
								 <li>
									 <a href="">配送范围</a>
								 </li>
								 <li>
									 <a href="">配送信息跟踪</a>
								 </li>
							 </ul>
							 <i></i>
						 </div>
						 <div class="list">
							 <ul>
								 <li>
									 <a class="title" href="">售后服务</a>
								 </li>
								 <li>
									 <a href="">正品承诺</a>
								 </li>
								 <li>
									 <a href="">退款说明</a>
								 </li>
								 <li>
									 <a href="">自助办理退换货</a>
								 </li>
							 </ul>
						 </div>
					 </div>
					 <div class="foot-right">
						 <p>ORIKS</p>
						 <img src="img/QR-Code.png" alt=""/>
						 <p>微信扫一扫码</p>
						 <p>获取更多优惠</p>
					 </div>
				 </div>
				 <p class="copyright">©2017&nbsp;欧瑞诗水晶网&nbsp;版权所留</p>
			 </div>
		 </div>
	</body>
</html>
